<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../common.css" type="text/css">
    <style>
       #coypright {
            width: 100vw;
            height: 100vh;
        }

        .back {
            width: 50vw;
            height: 90vh;
            padding: 5vh 25vw 5vh 25vw;
            background-color: #f8e27d;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;

        }
        .channel_title p{
            font-size: 3vw;

        }
        .channel_image{
            margin-top: 2vw;
        }
        .channel_image>div{
            width: 50vw;
            height: 25vw;
            background-color: red;
        }
        .channel_icon{
            width: 54vw;
            margin-top: 2vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .channel_icon>div{
            width: 10vw;
            line-height: 1vw;
            padding: 1vw;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .channel_icon>div img{
            width: 8vw;

        }
        .channel_icon>div p{
           font-size: 0.8vw;
            line-height: 1.2vw;
            font-weight: 600;
        }
        .channel_btn{
            margin-top: 8vh;
        }
        .channel_btn a{
            padding: 0.8vw 4vw;
            color: white;
            box-shadow: 4px 5px 2px #fedb2b85;
            background-image: linear-gradient(to right,#fb3e74 ,#fede2b );
            border-radius: 2vw;
        }
        </style>
</head>

<body>
    <div id="channel">
        <div class="back">
            <div class="channel_title">
                <p>渠道</p>
            </div>
            <div class="channel_image">
                <div></div>
            </div>
            <div class="channel_icon">
                <div class="channel_icon_saas">
                    <img src="../img/icon08.png" alt="">
                    <p>自研大小型号娃娃机</p>
                    <p>搭载自研SAAS整场管理</p>
                    <p>具备云支付功能</p>
                </div>
                <div class="channel_icon_box">
                        <img src="../img/icon09.png" alt="">
                    <p>萌岛 BOX</p>
                    <p>标准化场景</p>
                    <p>开辟线下娃娃机落地新场景</p>
                </div>
                <div class="channel_icon_online">
                        <img src="../img/icon10.png" alt="">
                    <p>萌岛抓抓乐</p>
                    <p>H5在线抓娃娃,无需下载</p>
                    <p>开辟娃娃机娱乐新姿势</p>
                </div>
              
            </div>
           
        </div>
    </div>
</body>

</html>